<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function() {
        var fm = ["form", "child_container", "formId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'form', DOC);
        TempUtil.render('helper_template', 'apnHelper', DOC);
        Page.setStripeTable();
        var ApnList= new Array();
        function getData() {
            Page.postJSON({
                json: {
                    cmd: RequestCmd.GET_APN_CONFIG
                },
                success: function(datas) {
                   var apnData = datas.data[2];
                   $("input[name='apnEnable']").val(apnData.enable);
                   if(apnData.enable == "1"){
                        $("#apnEnable").attr("checked",true);
                        $('.apn_is_show').show();
                   }else{
                        $("#apnDisable").attr("checked",true);
                        $('.apn_is_show').hide();
                   }
                   $("#selectType").val(apnData.ip_stack);
                   if(apnData.nat == "enable"){
                         $("#apnNat1").attr("checked",true);
                   }else{
                         $("#apnNat2").attr("checked",true);
                   }
                   if(apnData.nat_lookback == "enable"){
                         $("#apnNatLookBack1").attr("checked",true);
                   }else{
                         $("#apnNatLookBack2").attr("checked",true);
                   }
                   $('#apn_mtu').val(apnData.mtu)
                   // $("#apn_profile").val(apnData.profile_name);
                   $("#selectAuthentication").val(apnData.auth_type);
                   $("#apn_user_name").val(apnData.username);
                   $("#apn_user_password").val(apnData.password);
                   if(apnData.apn_name == undefined || apnData.apn_name == ""){
                        $("#apn_name").val("");
                   }else{
                        $("#apn_name").val(apnData.apn_name);
                   }
                   if($("#selectAuthentication").val() !== "0"){
                        if(apnData.enable == "1") {
                            $(".hideNone").show();
                        }else {
                            $(".hideNone").hide();
                        }   
                   }else{
                        $(".hideNone").hide();             
                   }
                   ApnList = datas.data;
                }
            });
        }
      getData();
    $("#selectAuthentication").change(function(){
        if($("#selectAuthentication").val() == "0"){
            $(".hideNone").hide(0);
         }else{
           $(".hideNone").show(0);
         }
      });

      var rules = {
            apnMTU: { required: true, range: [600, 1500] },
        },messages = {
            apnMTU: { required: CHECK.required.mtu, range: CHECK.format.mtu },
        };

      $("#btnSave").on("click",function(){
            $(this).attr("disabled",false);
        var apnEnable,selectType,apn_profile,selectAuthentication,apn_user_name,apn_user_password,apn_name,apn_apnNat;
            if($("#apnEnable").is(":checked")){
                apnEnable = 1;
            }else{
                apnEnable = 0;
            }
            apn_mtu = $('#apn_mtu').val();
            selectType =  $("#selectType").val();
            // apn_profile =  $("#apn_profile").val();
            selectAuthentication =  $("#selectAuthentication").val();
            apn_user_name =  $("#apn_user_name").val();
            apn_user_password =  $("#apn_user_password").val();
            apn_name =  $("#apn_name").val();
             apn_apnNat = $("input[name='apnNat']:checked").val();
          $form = $("#form");
            if(!CheckUtil.checkForm($form, rules, messages)){
                $(this).attr("disabled",false);
                return;
            }
          
          var json={},json2= new Object();
          json.enable = parseInt(apnEnable,10);
          json.ip_stack = selectType;
          json.profile_name = "";
          json.auth_type = parseInt(selectAuthentication,10);
          json.username = apn_user_name;
          json.apn_name = apn_name;
          json.mtu = apn_mtu;
          json.password = apn_user_password;
          json.nat = apn_apnNat;
          json.nat_lookback = $("input[name='apnNatLookBack']:checked").val();
          ApnList.splice(2,1,json);

          json2.apnList = ApnList;
          json2.method = JSONMethod.POST;
          json2.cmd = RequestCmd.SET_APN_CONFIG;
            Page.postJSON({
                     json: json2,
                     success:function(data){
                        if(data.success == true){
                        SysUtil.rebootDevice(PROMPT.tips.rebootMessage);
                        }
                     }
                 })
      })

      $('#form').addClass("setting_apn_form");

      $(':radio[name="apnEnable"]').change(function() {
          console.log($(':radio[name="apnEnable"]').attr('checked'))
        if( $(':radio[name="apnEnable"]').attr('checked') == undefined) {
            $('.apn_is_show').hide();
        }else {
            if($("#selectAuthentication").val() !== "0") {
                $('.apn_is_show').show();
            }else {
                $('.apn_is_show').show();
                $(".hideNone").hide();
            }
        }   
      });


    });
</script>

<div class="tab_boxes" id="child_container">
    <div id="formId">
        <script type="text/template" id="child_template">
    <!-- <form id="form" class="setting_apn_form"> -->         
            <table class="detail" cellspacing="0" id="apn_box">
                <tr id="apn_enable">
                    <th>
                        <label><%-DOC.apn.swich %><%- colon %></label> 
                    </th>
                    <td>
                        <input type="radio" name="apnEnable" value="1" id="apnEnable"><span><%-DOC.apn.open %></span> &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="apnEnable" value="0" id="apnDisable"><span><%-DOC.apn.close %></span>
                    </td>
                </tr>
                <tr class="apn_is_show" style="display: none">
                    <th>
                        <label><%-DOC.apn.nat %><%- colon %></label> 
                    </th>
                    <td>
    
                        <input type="radio" name="apnNat"  id="apnNat1" value="enable"><span><%-DOC.status.enable %></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="apnNat" id="apnNat2" value="disable"><span><%-DOC.status.disable %></span> 
                    </td>
                </tr>
                <tr class="apn_is_show" style="display: none">
                    <th>
                        <label><%-DOC.apn.natLookBack %><%- colon %></label> 
                    </th>
                    <td>
    
                        <input type="radio" name="apnNatLookBack"  id="apnNatLookBack1" value="enable"><span><%-DOC.status.enable %></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="apnNatLookBack" id="apnNatLookBack2" value="disable"><span><%-DOC.status.disable %></span> 
                    </td>
                </tr>
                <tr class="apn_is_show" style="display: none">
                    <th><%-TAB.basic.apn %><%- colon %></th>
                    <td>
                        <input type="text" name="apnName" id="apn_name">
                    </td>
                </tr>
                <tr class="apn_is_show" style="display: none">
                    <th><%-DOC.apn.mtu %><%- colon %></th>
                    <td>
                        <input type="text" name="apnMTU" id="apn_mtu">
                    </td>
                </tr>
                <tr id="apn_type" class="apn_is_show" style="display: none">
                    <th>
                        <%-DOC.apn.type %><%- colon %>
                    </th>
                    <td>
                    <select style="width:150px;" id="selectType">
                        <option value="IP">IPV4</option>
                        <option value="IPV6">IPV6</option>
                        <option value="IPV4V6">IPV4V6</option>
                    </select>
                    </td>
                </tr>
                
                <tr id="apn_authentication" class="apn_is_show" style="display: none">
                    <th><%-DOC.apn.authentication %><%- colon %></th>
                    <td>
                        <select style="width:150px;" id="selectAuthentication">
                            <option value="0">NONE</option>
                            <option value="1">PAP</option>
                            <option value="2">CHAP</option>
                            <option value="3">PAP&CHAP</option>
                        </select>
                    </td>
                </tr>
                <tr class="hideNone apn_is_show"  style="display:none;">
                    <th><%-DOC.apn.user %><%- colon %></th>
                    <td>
                        <input type="text" name="apnUserName" id="apn_user_name">
                    </td>
                </tr>
                <tr class="hideNone apn_is_show"  style="display:none;">
                    <th><%-DOC.apn.password %><%- colon %></th>
                    <td>
                        <input type="text" name="apnUserPassword" id="apn_user_password">
                    </td>
                </tr>
                <tr>
                        <th></th>
                        <td><input type="button" name="buttom" value="<%- networktoolhtml.form5.btnSetting %>" id="btnSave"/></td>
                </tr>
                
            </table>
        </script>
    </div>
    <!-- </form> -->

    <div class = "setting_apn_helper" id="apnHelper">
        <script type="text/template" id="helper_template">
            <div class="helper_name"><%- DOC.apnHelper.title0 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name0 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title1 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name1 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title2 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name2 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title3 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name3 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title4 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name4 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title5 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name5 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title8 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name8 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title6 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name6 %></div>

            <div class="helper_name"><%- DOC.apnHelper.title7 %></div>
            <div class="helper_desc"><%- DOC.apnHelper.name7 %></div>
        </script> 
    </div>
    
</div>

